import { FC, useCallback, useEffect,useState } from "react";
import './DateToConputer.css'
const DateToConputer: FC = () => {
  const [curTime,setCurTime]=useState(new Date())
  const [info,setInfo]=useState({day:0,minute:0,hour:0,})
  useEffect(() => {
    document.title="日期计算"
    console.log(333);
    let numdat: number = numberToFifteen(34);
    console.log(numdat);
  }, []);
  const numberToFifteen = (num: number) => {
    if (num % 15 > 0) {
      return (Math.trunc(num / 15) + 1) * 15;
    } else if (num % 15 === 0) {
      return num;
    } else {
      return num;
    }
  };
  //   DateToConputer
  const computerToDate = useCallback((time: string) => {
    const timenub = parseInt(time); //分钟
    const time_date = new Date(curTime); // date-time 日期+时间
    time_date.setTime(time_date.getTime() + timenub * 60 * 1000);
      setCurTime(time_date)
    console.log(time_date); //取出时间
  }, [curTime]);
  const updateTimeInfo=()=>{
    const curDateNum=new Date().getTime()
    const preDateNum=new Date("2024-05-02T15:00:00").getTime()
    const day_num=1000*60*60*24
    const day=Math.floor((curDateNum-preDateNum)/day_num)
    const hour=Math.floor(((curDateNum-preDateNum)%day_num)/(1000*60*60))
    const minutes=Math.floor((((curDateNum-preDateNum)%day_num)%(1000*60*60))/(1000*60))
    console.log("day",day,"hour==",hour,"minutes",minutes);
    setInfo({day:day,minute:minutes,hour:hour})
  }
  return (
    <>
    <h4>日期: {curTime.toLocaleDateString("en-CA",{year:"numeric",month:"2-digit",day:"2-digit"})}
      时间: {curTime.toLocaleTimeString("zh-CN")}
    </h4>
      <div className="layout-date">
        <button
          onClick={() => {
            computerToDate("30");
          }}
        >
          点击添加30分钟
        </button>
        <button
          onClick={() => {
            computerToDate("60");
          }}
        >
          点击添加60分钟
        </button>
        <button onClick={() => {
            computerToDate("90");
          }}
        >
          点击添加90分钟
        </button>
      </div>
      <button onClick={updateTimeInfo}>更新</button>
      <h4>当前时间距离2024年5月2日相差</h4>
      <h4>{info.day}天{info.hour}时{info.minute}分</h4>
    </>
  );
};
export default DateToConputer;
